<template>
  <div>
    <div class="container">
      <div class="c_banner">
        <img class="c_banner_img" :src="categoryData.banner" alt="" />
      </div>
      <div class="c_content">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">{{
            $t("首页")
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: 'productCenter' }">{{
            $t("产品中心")
          }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ titleContent }}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row style="margin-top: 56rem">
          <el-col :span="24" v-for="(item, index) in indexData" :key="item.id">
            <div class="c_full" :class="{ c_reverse: index % 2 == 1 }">
              <img
                class="c_full_img"
                :class="{ c_radius: index % 2 == 1 }"
                :src="item.scene"
                alt=""
              />
              <div class="c_full_view">
                <div class="c_full_f1">{{ item.title }}</div>
                <div class="c_full_f2">{{ item.info }}</div>
                <div class="c_full_f3">
                  {{ item.features }}
                </div>
                <div
                  class="c_see_detail"
                  @click="
                    $router.push({
                      path: $i18n.path('productDetail/' + item.id),
                    })
                  "
                >
                  <img class="c_baijt" src="~/assets/images/c_bjt.png" alt="" />
                  <span class="c_full_f4">{{ $t("查看详情") }}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 想要看看别的? -->
        <div class="c_hexin">
          <div class="c_title">{{ $t("想要看看别的") }}</div>
          <div class="swiper" v-swiper:mySwiper="SwiperOption">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="item in moreData" :key="item.id">
                <img :src="item.thumb" alt="" class="product-image" />
                <p class="product-info">{{ item.info }}</p>
                <p class="product-name">{{ item.title }}</p>
                <p
                  class="tips"
                  @click="
                    $router.push({
                      path: $i18n.path('productDetail/' + item.id),
                    })
                  "
                >
                  {{ $t("了解更多") }}>
                </p>
              </div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="container_mobile">
      <div class="c_banner">
        <div class="c_banner_text">
          <div class="c_banner_f1">{{ $t("ePro易豹无线洗地机W1") }}</div>
          <div class="c_banner_f2">{{ $t("干湿垃圾一推即净") }}</div>
        </div>
        <img class="c_banner_img" src="~/assets/images/c_banner6.png" alt="" />
      </div>
      <div class="c_content">
        <el-row style="margin-top: 40px">
          <el-col :span="24" v-for="item in indexData" :key="item.id">
            <div
              class="c_full"
              :style="{
                background: 'url(' + item.scene + ') no-repeat',
                backgroundSize: 'cover',
                backgroundPosition: 'center',
              }"
            >
              <div class="c_full_view">
                <div class="c_full_f1">{{ item.title }}</div>
                <div class="c_full_f2">{{ item.info }}</div>
                <div class="c_full_f3">
                  {{ item.features }}
                </div>
                <div
                  class="c_see_detail"
                  @click="
                    $router.push({
                      path: $i18n.path('productDetail/' + item.id),
                    })
                  "
                >
                  <span class="c_full_f4">• {{ $t("查看详情") }}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 想要看看别的? -->
        <div class="c_hexin">
          <div class="c_title">{{ $t("想要看看别的") }}</div>
          <div class="index-swiper" v-swiper:indexSwiper="indexSwiperOption">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="item in moreData" :key="item.id">
                <div class="c_full2">
                  <img class="c_full_img" :src="item.thumb" alt="" />
                  <div class="c_full_view">
                    <div class="c_full_f1">{{ item.title }}</div>
                    <div class="c_full_f2">{{ item.info }}</div>
                    <div
                      class="c_full_f3"
                      @click="
                        $router.push({
                          path: $i18n.path('productDetail/' + item.id),
                        })
                      "
                    >
                      {{ $t("了解更多") }}>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      SwiperOption: {
        //指示点
        loop: false,
        autoplay: false,
        slidesPerView: 3,
        spaceBetween: 40,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      indexSwiperOption: {
        //指示点
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        loop: false,
        slidesPerView: "auto",
        spaceBetween: 10,
        speed: 800,
        centeredSlidesBounds: true,
        centeredSlides: true,
      },
    };
  },
  async asyncData({ $indexApi, query }) {
    const res = await $indexApi.getGoodsFace({
      category_id: query.id,
    });
    const resMore = await $indexApi.getGoodsMore();
    // console.log(res.data);

    return {
      categoryData: res.data.category,
      indexData: res.data.list,
      moreData: resMore.data,
      titleContent: query.title,
    };
  },
};
</script>

<style lang="less" scoped>
@media (min-width: 900px) {
  .container_mobile {
    display: none;
  }
  .container {
    display: block;
    .c_banner {
      width: 100%;
      height: 560rem;
      position: relative;

      .c_banner_text {
        position: absolute;
        top: 0;
        left: 360rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .c_banner_f1 {
          font-size: 30rem;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #333333;
          margin-bottom: 40rem;
        }
        .c_banner_f2 {
          font-size: 60rem;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #333333;
        }
      }

      .c_banner_img {
        width: 100%;
        height: 100%;
      }
    }
    .c_content {
      padding: 40rem 100rem;
      background: #f2f2f2;
      .c_reverse {
        flex-direction: row-reverse;
      }
      .c_hexin {
        padding-bottom: 110rem;
        .c_title {
          font-size: 54rem;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #333333;
          margin: 120rem 0 60rem 0;
          text-align: center;
        }
        .swiper {
          padding-top: 40rem;
          .swiper-button-next,
          .swiper-button-prev {
            background: rgba(0,0,0,0) !important;
            &::after {
              font-size: 20rem;
              color: #5f5f5f;
            }
          }
          .swiper-button-prev {
            left: auto;
            right: 41rem;
            top: 20rem;
            border: none;
          }
          .swiper-button-next {
            left: auto;
            right: 0rem;
            top: 20rem;
            border: none;
          }
          .swiper-slide {
            width: 546rem;
            height: 400rem;
            background: #ffffff;
            border-radius: 20rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            &:hover {
              .product-image {
                transform: scale(1.2);
              }
            }

            .product-image {
              width: 180rem;
              height: 180rem;
              margin-top: 30rem;
              transition: 0.6s;
            }
            .product-name {
              font-size: 30rem;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #333333;
              margin: 0;
              margin-top: 16rem;
            }
            .product-info {
              font-size: 20rem;
              font-family: Source Han Sans CN;
              font-weight: 300;
              color: #999999;
              margin: 0;
              margin-top: 30rem;
            }
            .tips {
              font-size: 20rem;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #333333;
              margin: 0;
              margin-top: 22rem;
              cursor: pointer;
            }
          }
        }
      }
      .c_full {
        display: flex;
        margin-bottom: 20px;
        background: #fff;
        border-radius: 20rem;
        overflow: hidden;
        &:hover {
          .c_full_img {
            transform: scale(1.2);
          }
        }
        .c_full_img {
          width: 50%;
          height: 600rem;
          border-radius: 20rem 0 0 20rem;
          transition: 0.6s;
        }
        .c_radius {
          width: 50%;
          border-radius: 0 20rem 20rem 0;
          height: 600rem;
          transition: 0.6s;
        }
        .c_full_view {
          width: 50%;
          padding: 0 150rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .c_full_f1 {
            font-size: 24rem;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #333333;
          }
          .c_full_f2 {
            margin-top: 20rem;
            font-size: 40rem;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #333333;
          }
          .c_full_f3 {
            margin-top: 20rem;
            font-size: 20rem;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #999999;
          }
          .c_see_detail {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100rem;
            height: 40rem;
            min-width: 80px;
            min-height: 30px;
            background: #333333;
            border-radius: 4rem;
            cursor: pointer;
            margin-top: 90rem;
            transition: 0.6s;
            padding: 3rem 8rem;
            &:hover {
              background: #000;
            }
            .c_baijt {
              width: 18px;
              height: 5px;
              margin-right: 4px;
            }
            .c_full_f4 {
              font-size: 14rem;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 900px) {
  .container {
    display: none;
  }
  .container_mobile {
    display: block;
    .c_banner {
      width: 100%;
      height: 240px;
      position: relative;

      .c_banner_text {
        position: absolute;
        top: 0;
        left: 24px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .c_banner_f1 {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #333333;
          margin-bottom: 14px;
        }
        .c_banner_f2 {
          font-size: 20px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #333333;
        }
      }

      .c_banner_img {
        width: 100%;
        height: 100%;
      }
    }
    .c_content {
      background: #fafafa;
      .c_reverse {
        flex-direction: row-reverse;
      }
      .c_hexin {
        padding-bottom: 30px;
        .c_title {
          font-size: 20px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #333333;
          margin: 22px 0;
          text-align: center;
        }
        .index-swiper {
          width: 100%;
          .swiper-slide {
            width: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            cursor: pointer;
          }
          .c_full2 {
            width: 100%;
            overflow: hidden;
            margin-bottom: 20px;
            background: #fff;
            border-radius: 7px;
            display: flex;
            flex-direction: column;

            .c_full_img {
              width: 100%;
              height: 183px;
              border-radius: 7px 7px 0 0;
            }

            .c_full_view {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              padding: 10px;

              .c_full_f1 {
                font-size: 14px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #333333;
              }

              .c_full_f2 {
                margin-top: 6px;
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #999999;
              }
              .c_full_f3 {
                margin-top: 6px;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #333333;
              }
            }
          }
        }
      }
      .c_full {
        background: #fff;
        height: 530px;
        overflow: hidden;

        .c_full_view {
          padding: 30px 20px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-top: 60px;
          .c_full_f1 {
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #333333;
            text-align: center;
          }
          .c_full_f2 {
            margin-top: 10px;
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #333333;
            text-align: center;
          }
          .c_full_f3 {
            margin-top: 10px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #999999;
            display: none;
          }
          .c_see_detail {
            width: 94px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            border-radius: 36px;
            border: 1px solid #333;
            margin: 20px auto;
            .c_full_f4 {
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #333333;
            }
          }
        }
      }
    }
  }
}
</style>
